<template>
    <div class="app-container calendar-list-container">
        <basic-container>
            <avue-crud
                ref="crud"
                :option="tableOption"
                :data="list"
                :page="page"
                v-model="form"
                :table-loading="listLoading"
                @on-load="getList"
                @size-change="sizeChange"
                @current-change="currentChange"
            >
                <template slot-scope="scope" slot="fSearch">
                    <el-date-picker
                        v-model="searchForm.f"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </template>
                <template slot-scope="scope" slot="iSearch">
                    <el-date-picker
                        v-model="searchForm.f"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </template>
                <!-- 自定义上边按钮 -->
                <template slot="menuLeft">
                    <el-button
                        v-if="orderList_btn_down"
                        class="filter-item"
                        type="primary"
                        icon="el-icon-plus"
                        @click="handleDown"
                        >导出
                    </el-button>
                </template>
                <!-- 自定义表格右侧按钮 -->
                <template slot="menu" slot-scope="scope">
                    <el-button
                        v-if="orderList_btn_view"
                        type="text"
                        size="small"
                        icon="el-icon-edit"
                        @click="handleView(scope.row, scope.index)"
                        >查看
                    </el-button>
                </template>
            </avue-crud>
        </basic-container>
        <!-- 订单详情弹框 -->
        <el-dialog
            title="订单详情"
            :visible.sync="dialogVisible"
            width="60%"
        >
            <order-detail />
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false"
                    >关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { tableOption } from "@/const/crud/order/order-list";
import { mapGetters } from "vuex";
import orderDetail from "./detail";
export default {
    name: "orderList",
    components: {
        orderDetail,
    },
    data() {
        return {
            dialogVisible:false,
            searchForm: {},
            tableOption: tableOption,
            page: {
                total: 1, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 20, // 每页显示多少条
            },
            list: [
                {
                    id: 11111,
                },
            ],
            listLoading: false,
            form: {},
            orderList_btn_down: true,
            orderList_btn_view: true,
        };
    },
    created() {
        // this.orderList_btn_down = this.permissions["order_list_down"];
        // this.orderList_btn_view = this.permissions["order_list_view"];
    },
    computed: {
        ...mapGetters(["elements", "permissions"]),
    },
    methods: {
        getList() {},
        searchChange() {
            this.page.currentPage = 1;
            this.getList();
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        currentChange(current) {
            this.page.currentPage = current;
        },

        refreshChange() {
            this.getList(this.page);
        },

        handleView() {
            this.dialogVisible = true
        },

        handleDown() {},
        handleDelete(row, index) {
            this.$confirm(
                '是否确认删除名称为"' + row.roleName + '"' + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(function () {
                    //return delObj(row.roleId); 返回删除的方法
                })
                .then(() => {
                    this.getList(this.page);
                    this.$notify.success("删除成功");
                });
        },
    },
};
</script>

<style lang="scss" scoped>
</style>